<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件注册的两种方式及事件删除</title>
		
	</head>
	<body>
		<button>传统方法添加事件</button>
		<button>事件监听方式添加事件</button>
		<button>传统方法删除事件</button>
		<button>事件监听删除事件</button>
		<script>
			/* 
			传统方法添加事件，事件具有唯一性
			 同一个元素同一个事件只能添加一个处理函数，
			 如果我们添加了多个，那么后边的将会把前边的覆盖掉
			 */
			var btn1 = document.querySelector('button');
			var btn2 = btn1.nextElementSibling;
			var btn3 = btn2.nextElementSibling;
			var btn4 = btn3.nextElementSibling;
			
			btn1.onclick = function(){
				alert("我被第一次点击")
			}
			btn1.onclick = function(){
				alert("我被第二次点击")
			}
			
			// 事件监听方式添加事件
			// 多个同类事件被添加时，它们会顺序执行，从上到下
			btn2.addEventListener('click',function(){
				alert("我是事件监听添加，我被第一次点击")
			})
			
			function func1(){
				alert("我是事件监听添加，我被第二次点击")
			}
			btn2.addEventListener('click',func1)
			
			// 传统方式删除事件
			btn3.onclick = function(){
				alert("我我我");
				btn3.onclick = null;
			}
			// 事件监听方式删除事件
			btn4.addEventListener('click',func2)
			function func2(){
				alert("我是事件监听添加，我马上被删除");
				btn4.removeEventListener('click',func2);
			}
			
			
			
			
		</script>
		
	</body>
</html>